<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">{{ getBaseTypeName(baseType!) }}考前密卷</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">{{ getBaseTypeName(baseType!) }}考前密卷</view>
      </view>
    </view>
    <!-- #endif -->
    <scroll-view class="scroll-view" enable-back-to-top scroll-y>
      <view class="header">
        <view class="hearder-title">
          <image class="header-title-img" src="https://media.jiabl.net.cn/miniapp/images/pre_exam_paper_title.png"
            mode="scaleToFill" />
          <image class="header-figure-img" src="https://media.jiabl.net.cn/miniapp/images/page-header-figure.png"
            mode="scaleToFill" />
        </view>

        <view class="header-tips">
          <image class='header-tips-img' src="https://media.jiabl.net.cn/miniapp/images/notice.png"
            mode="scaleToFill" />
          不知道怎么练吗？试试我为你推荐的高效学习方法吧
          <uni-icons type="right" color="#525252" size="12" />
        </view>

      </view>
      <view class="paper-list">
        <view class="paper-list-item" v-for="(item, index) in preExamPapers">
          <view class="paper-list-item-left">
            <image class="item-image" src="https://media.jiabl.net.cn/miniapp/images/pre_exam_paper/paper.png"
              mode="scaleToFill" />
            <view class="item-title">
              <text class="name">{{ item.name }}</text>
              <text class="desc">{{ preExamPaperDescs[index] }}</text>
            </view>
          </view>
          <view class="paper-list-item-btn" @tap="toMockExam(item.id!)">去拆卷</view>
        </view>
        <view class="paper-list-item">
          <view class="paper-list-item-left">
            <image class="item-image" src="https://media.jiabl.net.cn/miniapp/images/pre_exam_paper/exam.png"
              mode="scaleToFill" />
            <view class="item-title">
              <text class="name">考前测试</text>
              <text class="desc">高度还原真实考场规则</text>
            </view>
          </view>
          <view class="paper-list-item-btn" @tap="toMockRealExam">去考试</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>

  import { ref, reactive } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import type { PreExamPaper } from '@/api/base/types'
  import { ExamTypeEnum } from '@/api/constants'
  import { usePreExamPapers } from '@/composables/MockExam'


  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif

  // 题库类型
  const baseType = ref<string>()
  // 考前密卷
  const preExamPapers = ref<PreExamPaper[]>()
  //考前密卷描述
  const preExamPaperDescs = reactive<string[]>([
    '紧跟新规，智能预测',
    '单元巩固，专项突破',
    '高频易错，直击考点'
  ])
  onLoad(async (options: any) => {
    baseType.value = options.baseType
    preExamPapers.value = usePreExamPapers(baseType.value!)
  })


  // 根据题库类型获取题库名称
  const getBaseTypeName = (baseType: string) => {
    if (baseType === 'km1') {
      return '科目一'
    }
    else if (baseType === 'km4') {
      return '科目四'
    }
  }
  /**
   * 去模拟考试
   */
  const toMockExam = (paperId: number) => {
    uni.navigateTo({
      url: `/pagesExam/mockExamAnswer/mockExamAnswer?baseType=${baseType.value}&examType=${ExamTypeEnum.PaperExam}&paperId=${paperId}`
    })
  }

  // 去真实考场模拟考试
  const toMockRealExam = () => {
    uni.navigateTo({
      url: `/pagesExam/mockRealExam/mockRealExam?baseType=${baseType.value}`
    })
  }
  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .viewport {
    background-repeat: no-repeat;
    background-image: url("https://media.jiabl.net.cn/miniapp/images/pre_exam_paper_bg.png");
    background-size: 100% auto;
    background-color: #f4f5f9;
  }

  .uni-nav-bar {
    .icon-arrow-left {
      font-weight: bold;
    }

    .title {
      align-self: center;
      flex: 1;
      text-align: center;
      font-size: 16px;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      // justify-content: center;
      height: v-bind(titleHeight);

      .title {
        margin-left: 82rpx;
        font-size: 16px;
        // font-weight: bold;
      }
    }
  }

  /* #endif */

  .scroll-view {
    display: flex;
    flex-direction: column;
    padding: 0rpx 30rpx;


  }

  .header {
    margin-top: 2rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .hearder-title {
      display: flex;
      justify-content: space-between;

      .header-title-img {
        margin-top: 40rpx;
        width: 380rpx;
        height: 98rpx;
      }

      .header-figure-img {
        width: 246rpx;
        height: 260rpx;
      }
    }

    .header-tips {
      position: absolute;
      left: 0;
      bottom: 25rpx;
      height: 60rpx;
      width: 100%;
      color: #525252;
      font-size: 23rpx;
      line-height: 60rpx;

      background-image: linear-gradient(90deg,
          #f9ecdc 0%,
          #faece1 100%),
        linear-gradient(#f6ece3,
          #f6ece3);
      border-radius: 27rpx;
      border: solid 2rpx #ffffff;
      opacity: 0.8;

      .header-tips-img {
        margin-top: -24rpx;
        margin-left: 10rpx;
        width: 41rpx;
        height: 46rpx;
      }
    }

  }

  .paper-list {
    .paper-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 22rpx;
      height: 149rpx;
      background-color: #ffffff;
      border-radius: 20rpx;

      .paper-list-item-left {
        display: flex;
        align-items: center;

        .item-image {
          margin: 0 20rpx;
          width: 65rpx;
          height: 81rpx;
        }

        .item-title {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .name {
            font-size: 34rpx;
            color: #694413;
            font-weight: bold;
          }

          .desc {
            margin-top: 22rpx;
            font-size: 26rpx;
            color: #ad9459;

          }
        }
      }

      .paper-list-item-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
        width: 162rpx;
        height: 63rpx;
        font-size: 28rpx;
        color: #953f32;
        background-color: #feeddd;
        border-radius: 32rpx;
      }
    }
  }

</style>
